<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar fixed placeholder title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="body">
      <!-- 标题 -->
      <h1 class="title">{{ info.title }}</h1>
      <!-- 作者信息 -->
      <div class="aut-box">
        <div class="left-box">
          <!-- 图片 -->
          <van-image :src="info.aut_photo" round fit="cover" />
          <div class="info-box">
            <!-- 作者名字 -->
            <div class="name">{{ info.aut_name }}</div>
            <!-- 时间 -->
            <div class="time">{{ info.pubdate | relvTime }}</div>
          </div>
        </div>
        <!-- 关注按钮 -->
        <van-button icon="plus" round size="small" type="info">关注</van-button>
      </div>

      <!-- 文章内容 -->
      <div class="content" v-html="info.content"></div>

      <article-comment></article-comment>
    </div>
  </div>
</template>

<script>
import { detailAPI } from '@/api/news'
import ArticleComment from './components/ArticleComment.vue'
export default {
  name: 'MyArticle',
  components: {
    ArticleComment
  },
  data () {
    return {
      info: {}
    }
  },
  async created () {
    const res = await detailAPI(this.$route.params.id)
    this.info = res.data
  }
}
</script>

<style lang="less" scoped>
.body {
  padding: 15px;
  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .aut-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .left-box {
      display: flex;
      align-items: center;
      .van-image {
        margin-right: 10px;
        width: 100px;
        height: 100px;
      }
      .time {
        margin-top: 10px;
        font-size: 12px;
        color: gray;
      }
    }
  }

  .content {
    margin-bottom: 20px;
    ::v-deep pre, code {
      display: inline-block;
      width: 100%;
      overflow: auto;
      background-color: #000;
      color:gray;
    }
  }
}
</style>
